DOM

BOM(Brower Object Model)

BOM(Brower Object Model, 브라우저 객체 모델)은 Brower와 관련된 기능을 수행하는 객체 모델이다.

DOM 또한 BOM 의 하위 객체 중 하나이다.

BOM의 최상위 객체는 window라는 객체이며, window 하위 객체로 DOM이 위치해있다.

DOM (Document Object Model)

DOM(Document Object Model, 문서 객체 모델)이란 HTML, XML 문서의 프로그래밍 인터페이스이다.

즉, DOM은 문서의 내용과 구조들이 객체 모델로 변환되어 다양한 프로그램에서 사용할 수 있게끔 제공한다.

이들은 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될수 있게 연결시켜주는 인터페이스 역할을 수행하는 것이다.

HTML 파일은 최초에 화면에 보이고자 하는 모양과 구조를 문서화한 설계도라고 생각하면 DOM의 경우, 해당 HTML 파일을 가지고 실제로 화면에 나타내지는 인터페이스이다.

DOM TREE

DOM은 트리 자료구조를 가지고 있다.

DOM의 트리구조는 프로그램, 스크립트가 보다 효율적으로 문서의 내용, 구조에 접근할 수 있도록 도움을 준다.

DOM 트리의 진입점(Root node)는 document 객체이며 document의 하위 노드 객체들을 통해 우리는 문서의 요소, 속성, 텍스트에 접근한다.

Critical Rendering Path(CRP)

Critical Rendering Path(중요 렌더링 경로)는 브라우저가 HTML, css, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말한다.

중요 렌더링 경로를 최적화하는 것은 말 그대로 렌더링 성능을 향상시키는 것이다.

우리는 Critical Rendering Path를 살펴봄으로써 DOM Tree가 언제 생성되고 어떻게 최종적으로 원본 HTML 문서가 뷰 스크린으로 표시되는지 이해할 수 있다.

CRP 6 단계

1. DOM Tree 구축
2. CSSSOM(CSS Object Model) Tree 구축
3. Javascript 실행
4. Render Tree 구축
5. 레이아웃 생성
6. 페인팅

1. DOM Tree 구축

주어진 HTML 파일을 각 element, text에 대한 노드(객체)들의 표현으로 만든다.

2. CSSOM Tree 구출

DOM은 페이지의 모든 컨텐츠를 포함하고, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함한다.

CSSOM은 DOM과 유사하지만 다르다. 브라우저는 모든 CSS를 처리하고 수신할 때까지 페이지 렌더링을 막는다. CSS는 규칙을 덮어쓸 수 있기 때문에 렌더링을 막는다. 그러므로 CSSOM이 완료될때까지 콘텐츠를 렌더링 할 수 없다.

3. Javascript 실행

javascript는 파서 차단 리소스(parser blocking resource)로 간주된다. HTML 구문 분석은 javascript에 의해 차단되는 것이다.

그말인 즉슨, 파서는 <script>태그에 도달하면 fetch를 중단하고 실행한다. 따라서 문서내 요소를 참조하는 javascript 파일이 있는 경우 문서가 표시된 후에 배치하는 것이 옳다.

4. Render Tree 구축

렌더링 트리는 DOM과 CSSOM의 조합이다.

페이지에서 최종적으로 렌더링 될 내용들만을 포함하는 트리이다. 즉, 표시되는 내용만을 캡쳐하기 때문에 CSS의 “display:none;” 속성이 부여된 요소는 렌더 트리에 포함하지 않는다.

5. 레이아웃 생성

레이아웃은 뷰포트(Display상의 출력영역)의 크기를 결정하며, 뷰포트의 크기는 뷰포트의 크기와 관련있는 CSS 스타일에 대한 컨텍스트를 제공한다.

6. 페인팅

마지막 단계로 페에지의 가시적인 내용을 픽셀로 변환하여 화면에 표시한다.

화면 출력시간은 DOM의 크기와 적용 스타일에 따라 다르다.